<template>
  <Timer/>
  <n-form
      ref="searchFormRef"
      :model="searchForm"
      inline
      label-placement="top"
  >
    <n-grid :cols="24" :x-gap="24">
      <n-form-item-gi :span="8" label="关键字" path="text">
        <n-input v-model:value="searchForm.text" clearable/>
      </n-form-item-gi>
      <n-form-item-gi :span="8" label="状态" path="status">
        <n-select v-model:value="searchForm.status" :options="taskStatusOptions" clearable/>
      </n-form-item-gi>
      <n-form-item-gi :span="8" label="创建日期" path="status">
        <n-date-picker v-model:value="searchForm.createAt" type="date" clearable/>
      </n-form-item-gi>
      <n-gi :span="24">
        <div style="display: flex; justify-content: flex-end">
          <n-button type="primary" @click="searchTask">
            <template #icon>
              <n-icon>
                <SearchIcon/>
              </n-icon>
            </template>
            查找
          </n-button>
        </div>
      </n-gi>
    </n-grid>
  </n-form>
</template>

<script setup>

import {inject, onMounted, ref, watch} from "vue";
import {SearchCircleOutline as SearchIcon} from '@vicons/ionicons5'
import {getPublicTask} from "../../api/taskApi.js";
import Timer from "../common/Timer.vue";

const props = defineProps({
  initialDate: {
    type: Number,
    default: null
  }
})

const emit = defineEmits(['updateTasks'])

const taskStatusOptions = inject('taskStatusOptions')

const searchForm = ref({
  page: 1,
  limit: 100,
  text: null,
  status: null,
  createAt: props.initialDate
})
const taskListTest = ref([])

onMounted(() => {
  searchTask()
})

function searchTask() {
  // emit('updateTasks', taskListTest.value)
  getPublicTask(searchForm.value).then(resp => {
    taskListTest.value = resp.data.item
    emit('updateTasks', taskListTest.value)
  })
}


</script>

<style scoped>

</style>